<template>
	<view class="add-reminder">
		<!-- 头部（带返回箭头 + 绿边 + 阴影） -->
		<view class="nav-bar">
			<uni-icons type="back" size="20" color="#00C48C" @click="goBack"></uni-icons>
			<text class="nav-title">添加提醒</text>
		</view>

		<!-- 表单容器（白卡 + 内边距） -->
		<view class="form-card">
			<!-- 药品名 -->
			<view class="form-row">
				<view class="label">药品名</view>
				<input class="input" placeholder="请输入药品名" v-model="drugName" />
			</view>

			<!-- 时间行（开始+结束） -->
			<view class="form-row time-row" style="display: flex;">
				<view class="col">
					<text class="label">用药开始时间</text>
					<picker mode="date" :value="startTime" @change="onStartTimeChange">
						<view class="input">{{ startTime || '时间选择器' }}</view>
					</picker>
				</view>
				<view class="col">
					<text class="label">结束时间</text>
					<picker mode="date" :value="endTime" @change="onEndTimeChange">
						<view class="input">{{ endTime || '时间选择器' }}</view>
					</picker>
				</view>
			</view>

			<!-- 单位选择 -->
			<view class="form-row">
				<text class="label">单位</text>
				<picker :range="unitList" :value="unitIdx" @change="onUnitChange">
					<view class="input select">
						{{ unitList[unitIdx] }}
						<text class="arrow">▼</text>
					</view>
				</picker>
			</view>

			<!-- 剂量 -->
			<view class="form-row">
				<text class="label">剂量</text>
				<input class="input" placeholder="请输入剂量" v-model="dosage" />
			</view>

			<!-- 重复提醒标识（绿竖线） -->
			<view class="repeat-label">
				<view class="dot"></view>
				<text class="repeat-title">重复提醒设置</text>
			</view>

			<!-- 周期+间隔 -->
			<view class="form-row repeat-row" style="display: flex;align-items: center;">
				<view class="" style="width: 300rpx;margin-right: 30rpx;display: flex;align-items: center;">
					<text class="label">周期：</text>
					<picker :range="periodList" :value="periodIdx" @change="onPeriodChange" style="width: 60%;">
						<view class="input select">
							{{ periodList[periodIdx] }}
							<text class="arrow">▼</text>
						</view>
					</picker>
				</view>
				<view class="" style="width: 300rpx;display: flex;align-items: center;">
					<text class="label">间隔：</text>
					<input class="input interval" v-model="interval" style="width: 300rpx;" />
				</view>

			</view>

			<!-- 结束重复时间 -->
			<view class="form-row">
				<text class="label">结束重复提醒时间</text>
				<picker mode="date" :value="repeatEndTime" @change="onRepeatEndTimeChange">
					<view class="input">{{ repeatEndTime || '时间选择器' }}</view>
				</picker>
			</view>
		</view>

		<!-- 保存按钮（绿渐变 + 阴影） -->
		<button class="save-btn" @click="saveReminder">保存</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	// 数据定义（保持原有逻辑）
	const drugName = ref('')
	const startTime = ref('')
	const endTime = ref('')
	const unitList = ['片', '粒', '袋', '毫升', '克', '毫克']
	const unitIdx = ref(0)
	const dosage = ref('')
	const periodList = ['天', '周', '月']
	const periodIdx = ref(0)
	const interval = ref(1)
	const repeatEndTime = ref('')

	// 事件（保持原有逻辑）
	function goBack() {
		uni.navigateBack()
	}

	function onStartTimeChange(e) {
		startTime.value = e.detail.value
	}

	function onEndTimeChange(e) {
		endTime.value = e.detail.value
	}

	function onRepeatEndTimeChange(e) {
		repeatEndTime.value = e.detail.value
	}

	function onUnitChange(e) {
		unitIdx.value = e.detail.value
	}

	function onPeriodChange(e) {
		periodIdx.value = e.detail.value
	}

	function saveReminder() {
		// 表单校验可根据需要补充
		uni.request({
			url: 'http://localhost:3010/reminder/add',
			method: 'POST',
			header: {
				'content-type': 'application/x-www-form-urlencoded',
				'Authorization': 'Bearer ' + uni.getStorageSync('token')
			},
			data: {
				medname: drugName.value,
				dtstatr: startTime.value,
				dtend: endTime.value,
				dose: dosage.value,
				units: unitList[unitIdx.value],
				freq: periodList[periodIdx.value] === '天' ? 'DAILY' : periodList[periodIdx.value],
				until: repeatEndTime.value,
				intervalue: interval.value
			},
			success: (res) => {
				if (res.data && res.data.code === 200) {
					uni.showToast({ title: '添加成功', icon: 'success' })
					setTimeout(() => {
						uni.navigateBack()
					}, 800)
				} else {
					uni.showToast({ title: '添加失败', icon: 'none' })
				}
			},
			fail: () => {
				uni.showToast({ title: '网络错误', icon: 'none' })
			}
		})
	}
</script>

<style scoped>
	/* 页面容器 */
	.add-reminder {
		min-height: 100vh;
		background: #F5F5F5;
		/* 页面背景浅灰，突出白卡 */
	}

	.nav-bar {
		display: flex;
		align-items: center;
		height: 44px;
		padding: 0 16px;
		background-color: #fff;
		border-bottom: 1px solid #eee;
		margin-top: 90rpx;
	}

	.nav-title {
		margin-left: 8px;
		font-size: 18px;
		font-weight: bold;
		color: #00C48C;
	}

	/* 头部区域 */
	.header {
		display: flex;
		align-items: center;
		height: 120rpx;
		padding-left: 32rpx;
		background: #FFFFFF;
		/* 绿边 + 阴影 */
		border-top: 6rpx solid #16E39A;
		box-shadow: 0 8rpx 24rpx rgba(22, 227, 154, 0.15);
	}

	.back-icon {
		margin-right: 16rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #16E39A;
	}

	/* 表单白卡 */
	.form-card {
		margin: 32rpx 24rpx;
		padding: 32rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		box-shadow: 0 8rpx 24rpx rgba(22, 227, 154, 0.1);
	}

	/* 表单项通用布局 */
	.form-row {
		margin-bottom: 40rpx;
	}

	.label {
		font-size: 34rpx;
		color: #333333;
		font-weight: bold;
	}

	/* 输入框（下划线样式） */
	.input {
		flex: 1;
		border: none;
		border-bottom: 2rpx solid #16E39A;
		font-size: 32rpx;
		color: #333333;
		padding: 16rpx 0;
	}

	.input::placeholder {
		color: #B2B2B2;
		font-size: 30rpx;
	}

	/* 时间行特殊布局 */
	.time-row {
		justify-content: space-between;
	}

	.col {
		width: 48%;
	}

	/* 选择器（带箭头） */
	.select {
		position: relative;
	}

	.arrow {
		position: absolute;
		right: 0;
		font-size: 28rpx;
		color: #16E39A;
	}

	/* 重复提醒标识（绿竖线） */
	.repeat-label {
		display: flex;
		align-items: center;
		margin: 40rpx 0 24rpx 0;
	}

	.dot {
		width: 4rpx;
		height: 36rpx;
		background: #16E39A;
		margin-right: 12rpx;
	}

	.repeat-title {
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
	}

	/* 间隔输入框 */
	.interval {
		width: 100rpx;
		margin-left: 8rpx;
	}

	/* 保存按钮 */
	.save-btn {
		width: 90%;
		margin: 64rpx auto 0;
		background:#00d36d;
		color: #FFFFFF;
		font-size: 36rpx;
		font-weight: bold;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
		border-radius: 15rpx;
		box-shadow: 0 8rpx 24rpx rgba(22, 227, 154, 0.3);
	}

	.save-btn::after {
		border: none;
		/* 清除uni默认边框 */
	}
</style>